盒模型，box-sizing，CSS3新特性，伪类，伪元素，锚伪类，使用CSS实现隐藏元素的方式,盒子在页面水平和垂直居中, inline和inline-block,块级元素,行级元素有哪些以及特点 ,网格布局,传统表格布局
盒模型：
margin(外边距) padding(内边距) border(边框) content(内容)
box-sizing:
content-box / border-box / inherit有以下三个属性
1：content-box:指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度，元素的填充和边框布局和绘制指定宽度和高度除外.
2 ：border-box:指定宽度和高度（最小/最大属性）确定元素边框box，对元素指定宽度和高度包括padding和border的指定，内容的宽度和高度减去各自双方该边框和填充的宽度从指定的“宽度”和“高度”属性计算
3 ：inherit:指定box-sizing属性的值，应该从父元素继承
C3新特性：
1 CSS实现圆角（border-radius）,阴影（box-shadow）,边框图片border-image
2 对文字加特效（text-shadow）,强制文本换行（word-wrap）,线性渐变（linear-gradient）
3 旋转，缩放，定位，倾斜： transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)
4 增加了更多的CSS选择器，多背景，rgba();
5 在CSS3中唯一引入的伪元素是::selection;
6 媒体查询（@media）,多栏布局（flex）
伪类：用于向某些选择器添加特殊的效果
1 ：hover 将样式添加到鼠标悬浮的元素
2 ：active 将样式添加到被激活的元素
3 ：focus 将样式添加到获得焦点的元素
4 ：link 将样式添加到未被访问过的链接
5 ：visited 将样式添加到被访问过的链接
6 ：first-child 将样式添加到元素的第一个子元素
7 ：lang 定义指定的元素中使用的语言
伪元素：用于将特殊的效果添加到某些选择器，伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
1 ::first-letter 将样式添加到文本的首字母
2 ::first-line 将样式添加到文本的首行
3 ::before 在某元素之前插入某些内容
4 ::after 在某元素之后插入某些内容
新增伪类：
| P:first-of-type | 选择属于其父元素的首个p元素的每个p元素 |
|---|---|
| P:last-of-type | 选择属于其父元素的最后p元素的每个p元素 |
| P:only-of-type | 选择属于其父元素唯一的p元素的每个p元素 |
| P:only-child | 选择属于其父元素唯一的子元素的每个p元素 |
| P:nth-child(n) | 选择属于其父元素的第n个子元素的每个p元素 |
| P:nth-last-child(n) | 选择属于其父元素的倒数第n个子元素的每个p元素 |
| P:nth-of-type(n) | 选择属于其父元素第n个p元素的每个p元素 |
| P:nth-last-of-type(n) | 选择属于其父元素倒数第n个p元素的每个p元素 |
| P:last-child | 选择属于其父元素最后一个子元素的每个p元素 |
| P:empty | 选择没有子元素的每个p元素(包括文本节点) |
| P:target | 选择当前活动的p元素 |
| :not§ | 选择非p元素的每个元素 |
| :enabled | 控制表单控件的可用状态 |
| :disabled | 控制表单控件的禁用状态 |
使用CSS实现隐藏元素的方式
1 Opacity:设置一个元素的透明度 .hide{opacity:0;}
2 Visibility .hide{visibility:hidden}
3 Display:确保元素不可见并且连盒模型也不生成 .hide{display:none}
4 Position .hide{position:absolute; top:-9999px; left:-9999px;}
5 Clip-path .hide{clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px};
盒子在页面水平和垂直居中
水平居中设置：
1 行内元素：设置text-align:center;
2 定宽块状元素：设置 左右 margin值为auto;
3 不定宽块状元素
4 在元素外加入 table标签(完整的，包括table,tbody,tr,td),该元素写在td内，然后设置margin的值为auto;
5 给该元素设置display:inline方法；
6 父元素设置position:relative和left:50%,子元素设置position:relative和left:50%
垂直居中设置:
1 父元素高度确定的单行文本，设置height=line-height;
2 父元素高度确定的多行文本
A:插入table（插入方法和水平居中一样）,然后设置vertical-align:middle;
B:先设置display:table-cell 再设置 vertical-align:middle;
position,display
position
position：absolute; 绝对定位的元素，相对于static定位以外的第一个父元素进行定位
position:fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位.
position:relative; 生成相对定位的元素，相对于其正常位置进行定位
position:static; 默认值，没有定位，元素在正常的文档流(忽略top,bottom,left,right或者z-index声明)
position:inherit; 规定应该从父元素继承position属性的值
display: ( 经常使用的 )
display:none 此元素不会被显示
display:block; 此元素将显示为块级元素，此元素前后会带有换行符
display:inline; 行内块元素
display:inline-block; 此元素会作为列表显示
提示：基础知识，必须要了解！
inline和inline-block
inline
1 inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化
2 Inline元素设置width,height属性无效
3 inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果；但竖直方向的padding-top,padding-bottom,magin-top,margin-bottom不会产生边距效果。
块级元素,行级元素有哪些以及特点
| 行内元素 | 块级元素 |
|---|---|
| a b em font i img input br label span small select textarea | address dl div form h1-h6 hr menu ol p |
| 行内元素不会独占一行，相邻的行内元素会排列在同一行里，一行排不下会自动换行，其宽度随元素的内容而变化。 | 块级元素会独占一行，其宽度自动填满其父元素宽度 |
| 块级元素可以设置margin,padding,行内元素的水平方向的padding-left，padding-right，margin-left，margin-right都产生边距效果，但是竖直方向padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果 | 块级元素可以设置width,height属性，行内元素设置宽高无效 |
网格布局
Grid布局又称“网格”，是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式，Grid布局是第一个专门为解决布局问题而创建的CSS模块
传统表格布局
Table用于布局，主要用来显示批量的数据；但是table有一个缺点，就是加载页面的时候，需要将全部的数据都请求到，才显示页面，否则就是一片的空白，所以现在一般都不用table进行布局.但因其稳定性非常优秀，一般在管理系统类项目中应用较多。